<template>
    <span class="btns" @click="handler">
      <button :data-i="index" :data-n="-1">-</button>
      <span class="counting">1</span>
      <button :data-i="index" data-n="+1">+</button>
    </span>
</template>
<script>
export default{
  props:["index","item"],
  methods:{
    
  }
}
</script>
<style scoped lang="scss">
  .btns{
    line-height: 30px;
    vertical-align: baseline;
    button{
      width:30px;
      height: 30px;
      border: 0;
      border-radius: 3px;
      line-height: 30px;
      background-color: rgb(243, 240, 240);
    }
    .counting{
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: rgb(243, 240, 240);
      border-radius: 3px;
      position: relative;
      top: -1px;
      margin: 0 2px;
    }
  }
</style>

        
    